<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格、列表</title>
    <style>
        #app {
            float: left;
            position: relative;
            /* padding: 100px; */
            /* margin: 100px; */
            text-align: left;
            font-size: 25px;
        }
        
        div>ul,
        ol,
        dl {
            float: left;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 表格<table> -->
        <table border="1">
            <caption>表格标题</caption>
            <!-- <tr>
                <th>这是第一行格外显示</th>
                <th>&nbsp;</th>
            </tr> -->
            <!-- 行<tr> -->
            <tr>
                <!-- 单元格<td> -->
                <td>1,1</td>
                <td>1,2</td>
                <td>1,3</td>
            </tr>
            <!-- 行<tr> -->
            <tr>
                <!-- 单元格<td> -->
                <td>2,1</td>
                <td>2,2</td>
                <td>2,3</td>
            </tr>
        </table>
    </div>
    <!-- 带有 thead、tbody 以及 tfoot 元素的 HTML 表格 -->
    <div id="app">
        <table border="1">
            <thead>
                <tr>
                    <th>Month</th>
                    <th>Savings</th>
                </tr>
            </thead>

            <tfoot>
                <tr>
                    <td>Sum</td>
                    <td>$180</td>
                </tr>
            </tfoot>

            <tbody>
                <tr>
                    <td>January</td>
                    <td>$100</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>$80</td>
                </tr>
            </tbody>
        </table>
    </div>
    <!-- 列表 -->
    <div id="app">
        <!-- 无序列表 -->
        <ul>
            <li>milke</li>
            <li>coffee</li>
            <li>spring</li>
        </ul>
        <ul>
            <li>tea</li>
            <li>water</li>
        </ul>
        <!-- 有序列表 -->
        <ol>
            <li>next</li>
            <li>after</li>
        </ol>
        <!-- 自定义列表 -->
        <dl>
            <dt>Coffee</dt>
            <dd>Black hot drink</dd>
            <dt>Milk</dt>
            <dd>White cold drink</dd>
        </dl>
    </div>
</body>

</html>